/*
 * @Author: yangzonglong
 * @Date: 2021-03-10 16:10:35
 * @version: v1.0.0
 * @Descripttion: Text 控制器
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-23 10:52:59
 * @Auditor:
 */
import React, { useState, BaseSyntheticEvent, useCallback } from 'react';
import { Input, Dropdown, Menu, Form, Checkbox } from 'antd';
import update from 'immutability-helper';
import useControlOptions from '../../hooks/useControlOptions';
import { TextProps } from './Text';
import Icon from './../icon/Icon';
import { SketchPicker } from 'react-color';
import classnames from 'classnames';
import style from './text.module.scss';

const TextArea = Input.TextArea,
  MenuItem = Menu.Item,
  autoSize = { minRows: 4 };

const fontSizeData = [
  { value: '12px', label: 'Small', height: 36, lineHeight: '20px' },
  { value: '14px', label: 'Normal', height: 38, lineHeight: '22px' },
  { value: '18px', label: 'Middle', height: 40, lineHeight: '26px' },
  { value: '28px', label: 'Large', height: 42, lineHeight: '36px' },
  { value: '38px', label: 'Huge', height: 52, lineHeight: '46px' },
];

const textAlignData = [
  { value: 'left', label: '左对齐', icon: <Icon icon="&#xe66d;" /> },
  { value: 'center', label: '居中对齐', icon: <Icon icon="&#xe66a;" /> },
  { value: 'right', label: '右对齐', icon: <Icon icon="&#xe66b;" /> },
  { value: 'justify', label: '两端对齐', icon: <Icon icon="&#xe670;" /> },
];

const Controller = () => {
  const { options, changeControlProps: change, id } = useControlOptions<TextProps>('textProps');
  const fontWeight = options.style?.fontWeight;
  const fontStyle = options.style?.fontStyle;
  const fontSize = options.style?.fontSize;
  const fontColor = options.style?.color;
  const clearFormat = options.textProps?.clearFormat;

  const [alignIcon, setAlignIcon] = useState(<Icon icon="&#xe66d;" />);

  const changeStyle = useCallback(
    (newStyle: React.CSSProperties) => {
      change(
        'style',
        update(options.style, {
          $merge: newStyle,
        }),
        true
      );
    },
    [change, options.style]
  );

  const onChangeText = useCallback(
    (e: BaseSyntheticEvent) => {
      change('textProps', {
        ...options.textProps,
        text: e.target.value
      }, true);
    },
    [change, options.textProps]
  );

  const onChangeTextEn = useCallback(
    (e: BaseSyntheticEvent) => {
      change('textProps', {
        ...options.textProps,
        textEn: e.target.value
      }, true);
    },
    [change, options.textProps]
  );

  const setFontColor = useCallback(
    (color: string) => {
      changeStyle({ color });
    },
    [changeStyle]
  );

  const setTextAlign = useCallback(
    ({ key }) => {
      changeStyle({ textAlign: key });
    },
    [changeStyle]
  );

  const setFontSize = useCallback(
    ({ key }) => {
      const curFontSize = fontSizeData.find((item) => item.value === key);

      changeStyle({
        fontSize: curFontSize?.value,
        lineHeight: curFontSize?.lineHeight,
      });
    },
    [changeStyle]
  );

  const setFontBold = useCallback(() => {
    changeStyle({ fontWeight: fontWeight === 'bold' ? 'normal' : 'bold' });
  }, [changeStyle, fontWeight]);

  const setFontStyle = useCallback(() => {
    changeStyle({ fontStyle: fontStyle === 'italic' ? 'normal' : 'italic' });
  }, [changeStyle, fontStyle]);

  const changeClearFormat = useCallback((checked) => {
    change('textProps', {
      ...options.textProps,
      clearFormat: checked
    }, true);
  }, [change, options.textProps]);

  return (
    <>
      <Form.Item label='ID'>
        <Input readOnly value={id} />
      </Form.Item>
      <span className={style.span}>中文内容</span>
      <div className={style.box}>
        <div className={style.toolbar}>
          <Icon className={classnames({ [style.on]: fontWeight === 'bold' }, style.w28, style.hover)} onClick={setFontBold} icon="&#xe66c;" />
          <Icon icon="&#xe66f;" className={classnames({ [style.on]: fontStyle === 'italic' }, style.w28, style.hover)} onClick={setFontStyle} />
          <Dropdown
            trigger={['click']}
            className={style.normal}
            overlay={
              <Menu onClick={setFontSize}>
                {fontSizeData.map((item) => (
                  <MenuItem key={item.value} style={{ padding: '0 12px', lineHeight: item.height + 'px' }}>
                    <span style={{ fontSize: item.value, display: 'block' }}>{item.label}</span>
                  </MenuItem>
                ))}
              </Menu>
            }
          >
            <div style={{ width: '74px' }} className={style.hover}>
              {fontSizeData.find((item) => item.value === fontSize)?.label || 'normal'}
              <Icon icon="&#xe673;" />
            </div>
          </Dropdown>

          <Dropdown
            placement="bottomRight"
            trigger={['click']}
            overlay={<SketchPicker onChange={(color) => setFontColor(color.hex.toLocaleUpperCase())} color={fontColor} />}
          >
            <div style={{ width: '42px' }} className={style.hover}>
              <Icon icon="&#xe66e;" />
              <Icon icon="&#xe673;" />
            </div>
          </Dropdown>

          <Dropdown
            placement="bottomRight"
            trigger={['click']}
            overlay={
              <Menu onClick={setTextAlign}>
                {textAlignData.map((item) => (
                  <MenuItem
                    onClick={() => setAlignIcon(item.icon)}
                    icon={item.icon}
                    style={{ padding: '0 12px', lineHeight: '36px' }}
                    key={item.value}
                  >
                    {item.label}
                  </MenuItem>
                ))}
              </Menu>
            }
          >
            <div style={{ width: '42px' }} className={style.hover}>
              {alignIcon}
              <Icon icon="&#xe673;" />
            </div>
          </Dropdown>
        </div>

        <TextArea placeholder="请输入描述文字" autoSize={autoSize} onChange={onChangeText} value={options?.textProps?.text} bordered={false} />


      </div>
      <span className={style.span}>英文内容</span>
      <div className={style.box}>
        <div className={style.toolbar}>
          <Icon className={classnames({ [style.on]: fontWeight === 'bold' }, style.w28, style.hover)} onClick={setFontBold} icon="&#xe66c;" />
          <Icon icon="&#xe66f;" className={classnames({ [style.on]: fontStyle === 'italic' }, style.w28, style.hover)} onClick={setFontStyle} />
          <Dropdown
            trigger={['click']}
            className={style.normal}
            overlay={
              <Menu onClick={setFontSize}>
                {fontSizeData.map((item) => (
                  <MenuItem key={item.value} style={{ padding: '0 12px', lineHeight: item.height + 'px' }}>
                    <span style={{ fontSize: item.value, display: 'block' }}>{item.label}</span>
                  </MenuItem>
                ))}
              </Menu>
            }
          >
            <div style={{ width: '74px' }} className={style.hover}>
              {fontSizeData.find((item) => item.value === fontSize)?.label || 'normal'}
              <Icon icon="&#xe673;" />
            </div>
          </Dropdown>

          <Dropdown
            placement="bottomRight"
            trigger={['click']}
            overlay={<SketchPicker onChange={(color) => setFontColor(color.hex.toLocaleUpperCase())} color={fontColor} />}
          >
            <div style={{ width: '42px' }} className={style.hover}>
              <Icon icon="&#xe66e;" />
              <Icon icon="&#xe673;" />
            </div>
          </Dropdown>

          <Dropdown
            placement="bottomRight"
            trigger={['click']}
            overlay={
              <Menu onClick={setTextAlign}>
                {textAlignData.map((item) => (
                  <MenuItem
                    onClick={() => setAlignIcon(item.icon)}
                    icon={item.icon}
                    style={{ padding: '0 12px', lineHeight: '36px' }}
                    key={item.value}
                  >
                    {item.label}
                  </MenuItem>
                ))}
              </Menu>
            }
          >
            <div style={{ width: '42px' }} className={style.hover}>
              {alignIcon}
              <Icon icon="&#xe673;" />
            </div>
          </Dropdown>
        </div>

        <TextArea placeholder="请输入描述文字" autoSize={autoSize} onChange={onChangeTextEn} value={options?.textProps?.textEn} bordered={false} />
      </div>


      <Form.Item className="antd-form-item-row" label="格式化文本" >
        <Checkbox
          checked={clearFormat}
          onChange={e => {
            changeClearFormat(e.target.checked);
          }} />
      </Form.Item>
    </>
  );
};

export default Controller;
